<template>
    <div class="meun">
        <img src="@/assets/img/logo.png" alt="" :class="flag?'active':'logo'">

         <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            unique-opened
            active-text-color="#409EFF"
            @close="handleClose"
            router
            :collapse="flag"
        >
            <el-menu-item index="/main/home">
                <el-icon :size="18" class="citon">
                    <House></House>
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-sub-menu index="/main/addRole">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <Key></Key>
                    </el-icon>
                    <span>权限管理</span>
                </template>
                <el-menu-item index="/main/addRole">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>权限新增</span>
                </el-menu-item>
                <el-menu-item index="/main/updRole">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>权限修改</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/main/addcate">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>类别管理</span>
                </template>
                <el-menu-item index="/main/addcate">
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>类别新增</span>
                </el-menu-item>
                <el-menu-item index="/main/catelist">
                    <el-icon :size="18" class="citon">
                        <User></User>
                    </el-icon>
                    <span>类别列表</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/main/addGoods">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>商品管理</span>
                </template>
                <el-menu-item index="/main/addGoods">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>商品新增</span>
                </el-menu-item>
                <el-menu-item index="/main/goodsList">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>商品列表</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/main/addType">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>类型管理</span>
                </template>
                <el-menu-item index="/main/addType">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>类型新增</span>
                </el-menu-item>
                <el-menu-item index="/main/typeList">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>类型列表</span>
                </el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="/main/addTran">
                <template #title>
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>轮播管理</span>
                </template>
                <el-menu-item index="/main/addTran">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>轮播新增</span>
                </el-menu-item>
                <el-menu-item index="/main/tranList">
                    <el-icon :size="18" class="citon">
                        <Bell></Bell>
                    </el-icon>
                    <span>轮播列表</span>
                </el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/main/mine">
                <el-icon :size="18" class="citon">
                    <Menu></Menu>
                </el-icon>
                <span>个人中心</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>
<script>
import {ArrowLeftBold,Bell,Menu,Key,User,House} from "@element-plus/icons-vue"
import { useStore } from 'vuex'
import { computed } from '@vue/runtime-core'
export default {
     components:{
        House,
        User,
        Key,
        Menu,
        Bell
    },
}
</script>

<style lang="scss" scoped>
.meun{
    .logo{
        width: 195px;
        height: 195px;
    }
    .active{
        width: 63px;
        height: 63px;
    }
    .citon{
        color: #fff;
    }
    .el-menu-item{
        background: #242629;
        color: #ccc;
    }
    .el-sub-menu{
        background: #000;
         .el-sub-menu__title {   
            span{
                color: #ccc;
            }
        }
        
    }
    .is-active{
        color: chocolate;
    }    
}
</style>